<template>
	<view>
		<view class="content">
			<u-cell-group :border = "false">
				<u-cell-item :title-style="titleStyle" title="姓名"  :center="true" :arrow="false">
					<u-input v-model="user.attestationName" type="text" :border="false" height="40rpx" input-align="right" placeholder="请输入姓名" :disabled="isDisabled" :clearable="false"/>
				</u-cell-item>
				<u-cell-item :title-style="titleStyle" :border-bottom="user.type==1" title="身份证号"  :center="true" :arrow="false">
					<u-input v-model="user.attestationIdcode" type="text" :border="false" height="40rpx" input-align="right" placeholder="请输入身份证号" :disabled="isDisabled" :clearable="false"/>
				</u-cell-item>
				<u-cell-item v-if="user.type==1" :title-style="titleStyle" title="开户行" :center="true" :arrow="true" @click="click" :value="attestationBanknameStr">
					
				</u-cell-item>
				<u-cell-item v-if="user.type==1" :title-style="titleStyle" title="银行卡号"  :center="true" :arrow="false">
					<u-input v-model="user.bankCode" type="text" :border="false" height="40rpx" input-align="right" placeholder="请输入银行卡号" :disabled="isDisabled" :clearable="false"/>
				</u-cell-item>
				<u-cell-item v-if="user.type==1" :border-bottom="false" :title-style="titleStyle" title="手机号"  :center="true" :arrow="false">
					<u-input v-model="user.bankMobile" type="text" :border="false" height="40rpx" input-align="right" placeholder="请填写银行预留手机号" :disabled="isDisabled" :clearable="false"/>
				</u-cell-item>
			</u-cell-group>
			
			
			
		<!-- 	<view class="">
				<selfCode lable="姓名" @inputChang="attestationName" :inputValue="user.attestationName" dongLabelpaddingTop="'0'" :qianjin="false" type="input"
				 placeholder="请输入姓名" dongLabelpaddingRight="36rpx"></selfCode>
			</view>
			<view class="">
				<selfCode lable="身份证号" @inputChang="attestationIdcode" :inputValue="user.attestationIdcode" dongLabelpaddingTop="'0'" :qianjin="false" type="input"
				 placeholder="请输入身份证号" dongLabelpaddingRight="36rpx"></selfCode>
			</view>
			<view class=""  v-if="user.type==1" >
				<selfCode @inputChang="kaihuhang" lable="开户行" type="picker" dictType="bank_name" :pickerVal="user.attestationBankname"
				 dongLabelpaddingTop="12rpx" dongLabelpaddingRight="22rpx"></selfCode>
			</view>
			<view class="" v-if="user.type==1" >
				<selfCode lable="银行卡号" @inputChang="bankCode" :inputValue="user.bankCode" dongLabelpaddingTop="'0'" :qianjin="false" type="input" placeholder="请输入银行卡号"
				 dongLabelpaddingRight="36rpx"></selfCode>
			</view>
			<view class="" v-if="user.type==1" >
				<selfCode lable="手机号" @inputChang="bankMobile" :inputValue="user.bankMobile" dongLabelpaddingTop="'0'" :qianjin="false" type="input"
				 placeholder="请填写银行预留手机号" dongLabelpaddingRight="36rpx"></selfCode>
			</view> -->
		</view>

		<view class="content">
			<view class="idpictitle">身份证信息</view>
			<view class="" style="padding:0 30rpx;">
				<view class="uni-flex" style="justify-content: space-around;">
					<image src="../../static/image/zhengmian.png" mode="" class="shilitu"></image>
					<image src="../../static/image/guohui.png" mode="" class="shilitu"></image>
					<image src="../../static/image/shouchi.png" mode="" class="shilitu"></image>
				</view>
				<view class="uni-flex" style="justify-content: space-around;padding-top: 20rpx;padding-bottom: 40rpx;">
					<view class="shiliwenzi">示例</view>
					<view class="shiliwenzi">示例</view>
					<view class="shiliwenzi">示例</view>
				</view>
				<view class="uni-flex" style="justify-content: space-around;">
					<view class="shangchaun" >
						<image v-if="zhengmian" :src="$jiekou.uploadBaseUrl+user.idPositive" mode="" class="shilitu"></image>
						<image v-else src="../../static/image/jiahao.png" mode="" class="jiahao" @tap="$util.uploadFile($jiekou.renzhengUpload,idcodezheng)"></image>
						<image v-if="zhengmian && !attestation" src="../../static/image/shanchu.png" mode="" class="shanchu" @tap="shanchu('zhengmian')"></image>
					</view>
					<view class="shangchaun" >
						<image v-if="guohui" :src="$jiekou.uploadBaseUrl+user.idReverseSide" mode="" class="shilitu"></image>
						<image v-else src="../../static/image/jiahao.png" mode="" class="jiahao" @tap="$util.uploadFile($jiekou.renzhengUpload,idcodefan)"></image>
						<image v-if="guohui && !attestation" src="../../static/image/shanchu.png" mode="" class="shanchu" @tap="shanchu('guohui')"></image>
					</view>
					<view class="shangchaun" >
						<image v-if="shouchi" :src="$jiekou.uploadBaseUrl+user.idTake" mode="" class="shilitu"></image>
						<image v-else src="../../static/image/jiahao.png" mode="" class="jiahao" @tap="$util.uploadFile($jiekou.renzhengUpload,shouchiID)"></image>
						<image v-if="shouchi && !attestation" src="../../static/image/shanchu.png" mode="" class="shanchu" @tap="shanchu('shouchi')"></image>
					</view>
				</view>
				<view class="uni-flex" style="justify-content: space-around;padding-top: 20rpx;padding-bottom: 30rpx;">
					<view class="shiliwenzi">身份证正面</view>
					<view class="shiliwenzi">身份证反面</view>
					<view class="shiliwenzi">手持身份证照</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="idpictitle">支付宝信息截图</view>
			<view class="uni-flex" style="padding: 0 40rpx 32rpx 46rpx; justify-content: space-between;">
				<image src="../../static/image/zhifubao.png" mode="" style="width: 306rpx;height: 440rpx;"></image>
				<view class="" style="" >
					<!-- <image v-if="zhifubao" :src="$jiekou.uploadBaseUrl+user.zfbUserinfo" mode="" style="width: 216rpx;height: 318rpx;"></image> -->
					<view  class="shangchaun" style="width: 306rpx;height: 440rpx;">
						<image v-if="zhifubao" :src="$jiekou.uploadBaseUrl+user.zfbUserinfo" mode="" style="width: 306rpx;height: 440rpx;"></image>
						<image v-else src="../../static/image/jiahao.png" mode="" class="jiahao" @tap="$util.uploadFile($jiekou.renzhengUpload,zfbUserinfo)"></image>
						<image v-if="zhifubao && !attestation" src="../../static/image/shanchu.png" mode="" class="shanchu" @tap="shanchu('zhifubao')"></image>
					</view>
					
					<view v-if="!zhifubao" class="shiliwenzi" style="width: 306rpx;padding-top: 20rpx;">上传支付宝个人信息页</view>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="idpictitle">人像采集</view>
			<view class="uni-flex" style="padding: 0 40rpx 32rpx 46rpx; justify-content: space-between;">
				<image src="../../static/image/renxiang.jpg" mode="" style="width: 306rpx;height: 400rpx;"></image>
				<view class="" style="" >
					
					<view  class="shangchaun" style="width: 306rpx;height: 400rpx;">
						<image v-if="renxiang" :src="$jiekou.uploadBaseUrl+user.renxiangUrl" mode="" style="width: 306rpx;height: 400rpx;"></image>
						<image v-else src="../../static/image/jiahao.png" mode="" class="jiahao" @tap="uploadFile($jiekou.renzhengUpload,renxiangUrl)"></image>
						<image v-if="renxiang && !attestation" src="../../static/image/shanchu.png" mode="" class="shanchu" @tap="shanchu('renxiang')"></image>
					</view>
					<view v-if="!renxiang" class="shiliwenzi" style="width: 306rpx;padding-top: 20rpx;">拍照</view>
				</view>
			</view>
		</view>

		<view class="content" v-if="user.type==1">
			<view class="idpictitle">银行卡照片</view>
			<view class="uni-flex" style="padding: 0 40rpx 32rpx 46rpx; justify-content: space-between;">
				<image src="../../static/image/yinhangka.png" mode="" style="width: 306rpx;height: 196rpx;"></image>
				<view class="" style="" >
					<!-- <image v-if="yinhangka" :src="$jiekou.uploadBaseUrl+user.bankUrl" mode="" style="width: 306rpx;height: 196rpx;"></image> -->
					<view class="shangchaun" style="width: 306rpx;height: 192rpx;" >
						<image v-if="yinhangka" :src="$jiekou.uploadBaseUrl+user.bankUrl" mode="" style="width: 306rpx;height: 196rpx;"></image>
						<image  v-else src="../../static/image/jiahao.png" mode="" class="jiahao" @tap="$util.uploadFile($jiekou.renzhengUpload,bankUrl)"></image>
						<image v-if="yinhangka && !attestation" src="../../static/image/shanchu.png" mode="" class="shanchu" @tap="shanchu('yinhangka')"></image>
					</view>
					<!-- <view v-if="yinhangka" class="shangchaun" style="width: 306rpx;height: 192rpx;">
						<image src="../../static/image/shanchu.png" mode="" class="jiahao" @tap="shanchu('yinhangka')"></image>
					</view> -->
					<view v-if="!yinhangka" class="shiliwenzi" style="width: 306rpx;padding-top: 20rpx;">上传银行卡照片</view>
				</view>
			</view>
		</view>
		<view v-if="!attestation" class="" style="padding:0 54rpx 80rpx;">
			<submitButtom text="支付认证费" :buttonMethod="submit"></submitButtom>
		</view>
		<u-select v-model="show" mode="single-column" label-name="dictLabel" value-name="dictValue"  :list="bankList" @confirm="confirm"></u-select>
		<selfPopupMessage ref="selfPopupMessage"></selfPopupMessage>
		<u-modal v-model="showTongguo" :content="renzhengfei" title="认证"  :content-style="{'font-size':'35rpx'}" :show-title="false" confirm-text="通过" @confirm="submit" :show-cancel-button="true"></u-modal>
		<u-loading :show="loadingShow"></u-loading>
	</view>
</template>

<script>
	import selfCode from "@/components/self-card/self-card.vue"
	import submitButtom from "@/components/submit-button/submit-button.vue"
	export default {
		components: {
			selfCode,
			submitButtom
		},
		data() {
			return {
				user: {
					attestationName: "",
					attestationIdcode: "",
					"attestationBankname": 0,
					"bankCode": "",
					"bankMobile": "",
					idPositive: "",
					idTake: "",
					idReverseSide: "",
					zfbUserinfo: "",
					bankUrl: "",
					renxiangUrl:"",
					
				},
				titleStyle:{'color': '##8A8B90'},
				"zhengmian": false,
				"guohui": false,
				"shouchi": false,
				"zhifubao": false,
				"yinhangka": false,
				"renxiang":false,
				"attestation":false,
				"attestationBanknameStr":"",
				show:false,
				bankList:[
					
				],
				isDisabled:false,
				renzhengfei:"0",
				// renzhengfeierci:0,
				showTongguo:false,
				uuid:"",
				loadingShow:false
			}
		},
		onLoad: function() {
			var that = this;
			this.user = uni.getStorageSync("userInfo");
			console.log(this.user);
			if(this.user.attestation==2){
				this.attestation = true;
				this.isDisabled = true;
			}
			if (this.user.idPositive != undefined && this.user.idPositive != '') {
				this.zhengmian = true;
			}
			if (this.user.idReverseSide != undefined && this.user.idReverseSide != '') {
				this.guohui = true;
			}
			if (this.user.idTake != undefined && this.user.idTake != '') {
				this.shouchi = true;
			}
			if (this.user.zfbUserinfo != undefined && this.user.zfbUserinfo != '') {
				this.zhifubao = true;
			}
			if (this.user.bankUrl != undefined && this.user.bankUrl != '') {
				this.yinhangka = true;
			}
			if (this.user.renxiangUrl != undefined && this.user.renxiangUrl != '') {
				this.renxiang = true;
			}
			// if(this.user.attestationBankname != undefined && this.user.attestationBankname != 0){
			// 	this.attestationBanknameStr = 
			// }
			
			this.$util.nuiAjax(this.$jiekou.getDictTypeList,{dictType:"bank_name"},function(res){
				if(res.result == "true"){
					that.bankList = res.data;
					for(var i = 0;i<that.bankList.length;i++){
						var dic = that.bankList[i];
						if(that.user.attestationBankname != undefined && that.user.attestationBankname != 0 && dic.dictValue == that.user.attestationBankname){
							that.attestationBanknameStr = dic.dictLabel;
						}
					}
					
				}
			});
			
			// this.$util.nuiAjax(this.$jiekou.getcanshu,{canshu:"renzhengfei"},function(res){//初次认证的费用
			// 	if(res.result == "true"){
			// 		that.renzhengfei = "实名认证需要支付"+res.value+"元的认证费";
			// 	}
			// });
			
			
			
		},
		methods: {
			tijiao(){
				// var that = this;
				// if(that.renzhengfei == "0"){
				// 	console.log(that.renzhengfei);
				// 	that.submit();
				// 	return;
				// }
				// this.showTongguo = true;
				
			},
			click(index){
				if(this.isDisabled){
					return;
				}
				this.show = true;
			},
			confirm(e) {
				var userinfo = uni.getStorageSync("userInfo");
				this.attestationBanknameStr = e[0].label;
				this.user.attestationBankname = e[0].value;
			},
			shanchu:function(type){
				if(type=="zhengmian"){
					this.zhengmian = false;
					this.user.idPositive = "";
				}
				if(type=="guohui"){
					this.guohui = false;
					this.user.idReverseSide = "";
				}
				if(type=="shouchi"){
					this.shouchi = false;
					this.user.idTake = "";
				}
				
				if(type=="zhifubao"){
					this.zhifubao = false;
					this.user.zfbUserinfo = "";
				}
				
				if(type=="yinhangka"){
					this.yinhangka = false;
					this.user.bankUrl = "";
				}
				
				if(type=="renxiang"){
					this.renxiang = false;
					this.user.renxiangUrl = "";
				}
			},
			uploadFile:function(url,success){
				uni.chooseImage({
					sourceType:['camera'],
					success: (chooseImageRes) => {
						var tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths);
						uni.uploadFile({
							url: url, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (res) => {
								var data = JSON.parse(res.data);
								if(data.result=="200"){
									// that.user.head=data.database;
									// that.user.http=data.http;
									success(data.database);
									// console.log(JSON.stringify(that.user));
								}
							}
						});
					},
					fail:function(){
						console.log("shibai");
					}
				});
			},
			submit: function() {
				// this.$util.toUrl("./renzhengchenggong");
				var that = this;
				var id = uni.getStorageSync("token");

				this.user.userId = id;
				this.user.id = id;
				if ( this.user.attestationName == "") {
					that.$refs.selfPopupMessage.open("请输入姓名", "error");
					return;
				}
				if (this.user.attestationIdcode == "" || !this.$util.checkID(this.user.attestationIdcode)) {
					that.$refs.selfPopupMessage.open("请输入正确的身份证号", "error");
					return;
				}
				if (this.user.type==1 && this.user.attestationBankname == 0) {
					that.$refs.selfPopupMessage.open("请选择开户行", "error");
					return;
				}
				if (this.user.type==1 && this.user.bankCode == "") {
					that.$refs.selfPopupMessage.open("请输入银行卡号", "error");
					return;
				}
				if (this.user.type==1 && (this.user.bankMobile == "" || this.$util.checkmobile(this.user.bankMobile))) {
					that.$refs.selfPopupMessage.open("请输入银行预留的正确手机号", "error");
					return;
				}
				if (!this.zhengmian) {
					that.$refs.selfPopupMessage.open("请上传身份证正面照", "error");
					return;
				}
				if (!this.guohui) {
					that.$refs.selfPopupMessage.open("请上传身份证反面照", "error");
					return;
				}
				if (!this.shouchi) {
					that.$refs.selfPopupMessage.open("请上传本人手持身份证正面照", "error");
					return;
				}
				if (!this.zhifubao) {
					that.$refs.selfPopupMessage.open("请上传支付宝个人信息页截图", "error");
					return;
				}
				if (this.user.type==1 && !this.yinhangka) {
					that.$refs.selfPopupMessage.open("请上传银行卡照片", "error");
					return;
				}
				
				if (!this.renxiang) {
					that.$refs.selfPopupMessage.open("尚未人像采集", "error");
					return;
				}
				
				
				this.$util.nuiAjax(this.$jiekou.saveRnezhengshuju, this.user, function(res) {
					uni.$emit("update_user");
					if (res.result == "true") {
						uni.navigateTo({
							url: './renzhengfei'
						});
					}
				
				})
				
				// this.$util.nuiAjax(this.$jiekou.submitRenzheng, this.user, function(res) {
				// 	uni.$emit("update_user");
				// 	if (res.result == "true") {
				// 		// that.$util.toUrl("./renzhengchenggong");
				// 		uni.redirectTo({
				// 		    url: './renzhengchenggong'
				// 		});
				// 		uni.$emit("renzhengson", {
				// 			renzheng: 2
				// 		});
						
				// 	}else if(res.result == "1"){//认证费不足
				// 		that.$refs.selfPopupMessage.open(res.message, "error");
				// 		return;
				// 	} else {
				// 		that.$util.nuiAjax(that.$jiekou.getcanshu,{canshu:"renzhengdizeng"},function(res){//二次的认证的费用
				// 			if(res.result == "true"){
				// 				that.renzhengfei = "实名认证需要支付"+res.value+"元的认证费";
				// 			}
				// 		});
				// 		uni.$emit("renzhengson", {
				// 			renzheng: 0
				// 		});
				// 		// that.$util.toUrl("./renzhengshibai?message="+res.message);
				// 		uni.redirectTo({
				// 		    url: "./renzhengshibai?message="+res.message
				// 		});
						
				// 	}

				// })
			},
			bankCode: function(value) {
				this.user.bankCode = value;
			},
			attestationName: function(value) {
				this.user.attestationName = value;
			},
			attestationIdcode: function(value) {
				this.user.attestationIdcode = value;
			},
			kaihuhang: function(value) {
				this.user.attestationBankname = value;
			},
			bankMobile: function(value) {
				this.user.bankMobile = value;
			},
			idcodezheng: function(pic) {
				this.user.idPositive = pic;
				this.zhengmian = true;
			},
			shouchiID: function(pic) {
				this.user.idTake = pic;
				this.shouchi = true;
			},
			idcodefan: function(pic) {
				this.user.idReverseSide = pic;
				this.guohui = true;
			},
			zfbUserinfo: function(pic) {
				console.log(this.pic);
				this.user.zfbUserinfo = pic;
				this.zhifubao = true;
				
			},
			bankUrl: function(pic) {
				this.user.bankUrl = pic;
				this.yinhangka = true;
			},
			renxiangUrl:function(pic){
				this.user.renxiangUrl = pic;
				this.renxiang = true;
			}
		}
	}
</script>

<style lang="scss">
	
	.shanchu{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: -10rpx;
		top: -15rpx;
		background-color: #FFFFFF;
		border-radius: 40rpx;
	}
	
	page {
		background-color: $page-bg-color;
	}

	.content {
		box-shadow: 0px 8px 16px 0px rgba(246, 247, 248, 1);
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}

	.idpictitle {
		// height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(25, 25, 25, 1);
		line-height: 40rpx;
		padding: 30rpx;
	}

	.shilitu {
		width: 224rpx;
		height: 140rpx;
		border: 1rpx dashed #E1E1E1;
		border-radius: 6rpx;
	}

	.shiliwenzi {
		width: 224rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(25, 25, 25, 1);
		line-height: 34rpx;
		text-align: center;
	}

	.jiahao {
		width: 34rpx;
		height: 34rpx;
	}

	.shangchaun {
		align-items: center;
		display: flex;
		width: 224rpx;
		height: 140rpx;
		border: 1rpx dashed #E1E1E1;
		justify-content: center;
		border-radius: 6rpx;
		position: relative;
	}
</style>
